<template>
  <a-row :gutter="5">
    <a-col :span="4">
      <a-card :title="permission.meta.title">
        <div slot="extra" class="drawer-bootom-button">
          <a-dropdown :trigger="['click']" placement="topCenter">
            <a-menu slot="overlay">
              <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
              <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
            </a-menu>
            <a-button>
              树操作
              <a-icon type="up" />
            </a-button>
          </a-dropdown>
        </div>
        <div style="background: #fff;">
          <a-col :md="10" :sm="24">
            <template>
              <a-tree
                :show-line="true"
                :treeData="[permission]"
                :expandedKeys="iExpandedKeys"
                :default-selected-keys="defaultSelectedKeys"
                @expand="onExpand"
                @select="onSelect"
              >
                <a-icon slot="switcherIcon" type="down" />
              </a-tree>
            </template>
          </a-col>
        </div>
      </a-card>
    </a-col>
    <a-col :span="20">
      <component :is="currentComponent" />
    </a-col>
  </a-row>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      title: '',
      currentComponent: null,
      iExpandedKeys: [],
      allTreeKeys: [],
      defaultSelectedKeys: []
    }
  },
  computed: {
    ...mapState({
      permission: function(state) {
        let currentPath = this.$route.path
        let permissionList = state.user.permissionList
        let rPermission = this.findObjectByCurrentPath(permissionList, currentPath)
        let firstLeafKey = null

        // 递归处理 树结构
        const processNode = (node) => {
          node.title = (node.meta && node.meta.title) || ''
          node.key = node.id
          this.allTreeKeys.push(node.key)
          if ((!node.children || node.children.length === 0) && firstLeafKey === null) {
            firstLeafKey = node.key
            this.initComponent(node)
          }
          if (node.children && node.children.length > 0) {
            node.selectable = false
            node.children.forEach(processNode)
          }
        }

        if (rPermission) {
          processNode(rPermission)
        }
        this.expandAll() // 默认全部展开
        this.defaultSelectedKeys.push(firstLeafKey)
        return rPermission
      }
    })
  },
  created() {
  },
  mounted() {
  },
  methods: {
    findObjectByCurrentPath(dataArray, path) {
      for (let data of dataArray) {
        if (data.path === path) {
          return data
        }
        // 递归搜索子节点
        if (data.children && Array.isArray(data.children)) {
          const result = this.findObjectByCurrentPath(data.children, path)
          if (result) {
            return result
          }
        }
      }
      return null
    },

    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },

    closeAll() {
      this.iExpandedKeys = []
    },

    onSelect(selectedKeys, e) {
      let record = e.node.dataRef
      this.initComponent(record)
    },

    initComponent(record) {
      const requireComponent = require.context('@/views', true, /\.vue$/)
      const componentPath = `./${record.component}.vue`
      if (requireComponent.keys().includes(componentPath)) {
        this.currentComponent = () =>
          Promise.resolve(requireComponent(componentPath))
      } else {
        console.error(`组件路径 ${componentPath} 未找到`)
      }
    },

    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

/deep/ .ant-tabs-nav-container {
  margin-top: 0 !important;
}
</style>
